import * as echarts from '../../../../common/page/ec-canvas/echarts';
import {
  Toast
} from 'wuss-weapp';
let app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    wx.setNavigationBarTitle({
      title: app.globalData.appTitle,
    })
    this.setData({
      theme: app.globalData.theme,
      id: options.id
    });
    app.setNavigationBarColor();
    this.voteDetailLoad();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
    // this.innerAudioContext.destroy();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  /**
   * 上下篇文章切换
   */
  changeArticle: function(e) {
    let id = e.currentTarget.dataset.id;
    if (!id) {
      Toast.show({
        type: 'success',
        message: "暂无文章！",
      });
      return;
    }
    this.setData({
      id: id
    });
    this.voteDetailLoad();
  },
  /**
   * 详情
   */
  voteDetailLoad: function() {
    app.wxGetRequest("/wechart/life/getMicroservice", {
      url: app.globalData.urlMicro + "/v1/article/one",
      id: this.data.id
    }).then(result => {
      this.setData({
        result: result.data,
      });
      // 获取组件
      this.voteEcComponent = this.selectComponent('#mychart-vote-bar');
      this.initChart(result.data);
    });
  },
  /**
   * 提交投票
   */
  saveVote: function(e) {
    let articleVoteId = e.currentTarget.dataset.voteId;
    let title = e.currentTarget.dataset.title;
    app.confirm("温馨提示", "您确认投票给『" + title + "』").then(result => {
      app.wxPostRequest("/wechart/life/postMicroservice", {
        url: app.globalData.urlMicro + "/v1/article/votes/user",
        user_id: app.globalData.userInfo["user_id"],
        article_id: this.data.id,
        article_vote_id: articleVoteId
      }).then(result => {
        Toast.show({
          type: 'success',
          message: result.data.message,
        });
        this.voteDetailLoad();
      });
    });
  },
  /**
   * 初始化echarts
   */
  initChart: function(data) {
    this.voteEcComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      let xArray = [];
      let yArray = [];
      for (let i = 0; i < data.vote.length; i++) {
        xArray.push(data.vote[i].written);
        yArray.push(data.vote[i].votes_number);
      }
      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      let option = {
        title: {
          subtext: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: "10%",
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          data: xArray
        },
        yAxis: [{
          type: 'value',
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
          },
        }],
        series: [{
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            normal: {
              color: function(params) {
                let colorList = ['#1AAD19', '#E64340', '#1F78B4'];
                return colorList[params.dataIndex]
              },
              label: {
                show: true,
                position: 'top',
                formatter: '{b}\n{c}'
              }
            }
          },
          data: yArray
        }]
      };
      chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  }
})